<template>
  <!-- 按钮组件 -->
  <button
    @click="handleClick"
    class="
      text-sm text-center
      rounded
      duration-500
      flex
      justify-center
      items-center
      active:scale-105
    "
    :class="[typeEnum[type], sizeEnum[sizeKey].button]"
  >
    <x-svg-icon
      v-if="loading"
      name="loading"
      class="w-2 h-2 animate-spin mr-1"
    ></x-svg-icon>
    <x-svg-icon
      v-if="icon"
      :name="icon"
      class="m-auto"
      :class="sizeEnum[sizeKey].icon"
      :color="iconColor"
      :fillClass="iconClass"
    ></x-svg-icon>
    <slot v-else></slot>
  </button>
</template>
<script>
import { computed } from "vue-demi";

// <!-- 定义常量 跟业务代码区分 -->
const typeEnum = {
  primary: "text-white bg-zinc-800 hover:bg-zinc-900 active:bg-zinc-800",
  main: "text-white bg-main hover:bg-hover-main avtive:bg-main",
  info: "text-zinc-800 bg-zinc-200 hover:bg-zinc-300 active:bg-zinc-200",
};
const sizeEnum = {
  // 字体按钮
  default: {
    button: "w-8 h-4 text-base",
    icon: "",
  },
  small: {
    button: "w-7 h-3 text-base",
    icon: "",
  },
  // 图标按钮
  "icon-default": {
    button: "w-4 h-4 text-base",
    icon: "w-1.5 h-1.5",
  },

  "icon-small": {
    button: "w-4 h-4 text-base",
    icon: "w-1.5 h-1.5",
  },
};
</script>
<script setup>
const props = defineProps({
  icon: String,
  iconColor: String,
  iconClass: String,
  type: {
    type: String,
    default: "main",
    validator(val) {
      const keys = Object.keys(typeEnum);
      const result = keys.includes(val);
      if (!result) {
        throw new Error(`type不存在`);
      }
      return result;
    },
  },
  size: {
    type: String,
    default: "default",
  },
  isActiveAnim: {
    type: Boolean,
    default: true,
  },
  loading: {
    type: Boolean,
    default: false,
  },
});
const sizeKey = computed(() => {
  return props.icon ? "icon-" + props.size : "default";
});
const emits = defineEmits(["click"]);
const handleClick = () => {
  emits("click");
};
</script>

<style>
</style>